<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="Dashboard">
  <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
  <title>Dashio - Bootstrap Admin Template</title>
  <!-- Favicons -->
  <link href="${pageContext.request.contextPath }/images/favicon.png" rel="icon">
  <link href="${pageContext.request.contextPath }/images/apple-touch-icon.png" rel="apple-touch-icon">
  <!-- Bootstrap core CSS -->
  <link href="${pageContext.request.contextPath }/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!--external css-->
  <link href="${pageContext.request.contextPath }/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/zabuto_calendar.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/lib/gritter/css/jquery.gritter.css" />
  <!-- Custom styles for this template -->
  <link href="${pageContext.request.contextPath }/css/style.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath }/css/style-responsive.css" rel="stylesheet">
  <script src="${pageContext.request.contextPath }/lib/chart-master/Chart.js"></script>

  <!-- =======================================================
    Template Name: Dashio
    Template URL: https://templatemag.com/dashio-bootstrap-admin-template/
    Author: TemplateMag.com
    License: https://templatemag.com/license/
  ======================================================= -->
</head>

<body>
  <section id="container">
    <!-- **********************************************************************************************************************************************************
        TOP BAR CONTENT & NOTIFICATIONS
        *********************************************************************************************************************************************************** -->
    <!--header start-->
    <header class="header black-bg">
      <div class="sidebar-toggle-box">
        <div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
      </div>
      <!--logo start-->
      <a href="index.jsp" class="logo"><b>BES<span>Manage</span></b></a>
      <!--logo end-->
      
      <div class="top-menu">
        <ul class="nav pull-right top-menu">
           <li><a class="logout" href="${pageContext.request.contextPath }/UserController?op=exit">退出登录</a></li>
        </ul>
      </div>
    </header>
    <!--header end-->
    <!-- **********************************************************************************************************************************************************
        MAIN SIDEBAR MENU
        *********************************************************************************************************************************************************** -->
    <!--sidebar start-->
    <aside>
      <div id="sidebar" class="nav-collapse ">
        <!-- sidebar menu start-->
        <ul class="sidebar-menu" id="nav-accordion">
        	<p class="centered"><a href="index.jsp">
        	<!--管理员头像-->
          <!-- 默认头像 -->
			<c:if test="${sessionScope.backUser.u_img ==null}">
				<img  src="${pageContext.request.contextPath }/images/ui-sam.jpg" class="img-circle" width="80" />
			</c:if>
			<!-- 自定义头像 -->
			<c:if test="${sessionScope.backUser.u_img !=null}">
				<img  src="${pageContext.request.contextPath }/DownloadServlet?fileName=${sessionScope.backUser.u_img}"  class="img-circle" width="80" />
			</c:if>
          </a></p>
          <!--管理员名-->
          <h5 class="centered">${sessionScope.backUser.u_name}</h5>
          <li class="mt">
            <a href="index.jsp">
              <i class="fa fa-dashboard"></i>
              <span>公司信息</span>
              </a>
          </li>
          <li class="sub-menu">
            <a href="javascript:;">
              <i class="fa fa-desktop"></i>
              <span>用户管理</span>
              </a>
            <ul class="sub">
              <li><a href="user-information.jsp">用户信息</a></li>
              <li><a href="adduser.jsp">添加用户</a></li>
            </ul>
          </li>
          <li class="sub-menu">
            <a class="active" class="active" href="javascript:;">
              <i class="fa fa-tasks"></i>
              <span>车次管理</span>
              </a>
            <ul class="sub">
              <li><a href="bus-information.jsp">车次信息</a></li>
              <li class="active"><a href="${pageContext.request.contextPath }/back/moment-information.jsp">时刻信息</a></li>
              <li><a href="${pageContext.request.contextPath }/back/addmoment.jsp">添加时刻表</a></li>
              <li><a href="${pageContext.request.contextPath }/back/addsite.jsp">添加车次</a></li>  
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:;">
              <i class="fa fa-th"></i>
              <span>站点管理</span>
              </a>
            <ul class="sub">
              <li><a href="${pageContext.request.contextPath }/back/bussite-information.jsp">站点信息</a></li>
              <li><a href="${pageContext.request.contextPath }/back/addbussite.jsp">添加站点</a></li>
              <li><a href="${pageContext.request.contextPath }/back/addbusSites.jsp">新增站点</a></li>
            </ul>
          </li>
    
          <li class="sub-menu">
            <a href="javascript:;">
              <i class="fa fa-comments-o"></i>
              <span>公告栏管理</span>
              </a>
            <ul class="sub">
              <li><a href="${pageContext.request.contextPath }/back/announcement.jsp">公告栏信息</a></li>
            </ul>
          </li>
          <li>
             <a href="${pageContext.request.contextPath }/back/baidu_maps.jsp">
              <i class="fa fa-map-marker"></i>
              <span>百度地图</span>
              </a>
          </li>
        </ul>
        <!-- sidebar menu end-->
      </div>
     <!--sidebar start-->
    </aside>
     <!--sidebar end-->
 <!--main content start-->
    <section id="main-content">
     	<section class="wrapper">
     		<!-- row -->
        <div class="row mt">
          <div class="col-md-12">
            <div class="content-panel">
              <table class="table table-striped table-advance table-hover">
                <h4><i class="fa fa-angle-right"></i>时刻列表</h4>
                <hr>
                <thead>
                  <tr>
                    <th>时刻编号</th>
                    <th>发车时间</th>
                    <th>末班时间</th>
                    <th>发车间隔</th>
                    <th><i class=" fa fa-edit"></i>操作</th>
                  </tr>
                </thead>
                <tbody id="momentsListBody">

                </tbody>
              </table>
					<!-- 分页信息 -->
					<div id="showPageInfo"></div>
					<!-- 分页实现    -->
				   <div class="col-md-12 text-center"><!-- 设置居中 -->
						<ul class="pagination" id="pageItem">
							
						</ul>
				 </div>	
            <!-- /content-panel -->
          </div>
          <!-- /col-md-12 -->
        </div>
        <!-- /row -->
      </section>
    </section>
    <!--main content end-->
    <!--footer start-->
    <footer class="site-footer">
      <div class="text-center">
        <p>&copy; Copyrights <strong>Dashio</strong>. All Rights Reserved</p>
        <div class="credits"> Created with Dashio template by <a href="https://templatemag.com/">TemplateMag</a></div>
        <a href="index.jsp#" class="go-top">
          <i class="fa fa-angle-up"></i>
          </a>
      </div>
    </footer>
    <!--footer end-->
  </section>
  
  	<!-- 放最后面 -->
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<form class="form-horizontal" role="form" >
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">修改时刻信息</h4>
					</div>
					<div class="modal-body">

						<div class="form-group">
							<label for="m_id" class="col-sm-2 control-label">时刻编号</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" id="m_id"
									name="m_id" readonly="readonly" />
							</div>
						</div>
						<div class="form-group">
							<label for="m_begin" class="col-sm-2 control-label">首发时间</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" id="m_begin"
									name="m_begin" />
							</div>
						</div>
						<div class="form-group">
							<label for="m_end" class="col-sm-2 control-label">末班时间</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" id="m_end"
									name="m_end" />
							</div>
						</div>
						<div class="form-group">
							<label for="m_interval" class="col-sm-2 control-label">时间间隔</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" id="m_interval"
									name="m_interval" />
							</div>
						</div>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>
						<button type="button" class="btn btn-primary" id="updateBtn">提交更改</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</form>
		</div>
		<!-- /.modal -->
	</div>
	
  <!-- js placed at the end of the document so the pages load faster -->
  <script src="${pageContext.request.contextPath }/lib/jquery/jquery.min.js"></script>

  <script src="${pageContext.request.contextPath }/lib/bootstrap/js/bootstrap.min.js"></script>
  <script class="include" type="text/javascript" src="${pageContext.request.contextPath }/lib/jquery.dcjqaccordion.2.7.js"></script>
  <script src="${pageContext.request.contextPath }/lib/jquery.scrollTo.min.js"></script>
  <script src="${pageContext.request.contextPath }/lib/jquery.nicescroll.js" type="text/javascript"></script>
  <script src="${pageContext.request.contextPath }/lib/jquery.sparkline.js"></script>
  <!--common script for all pages-->
  <script src="${pageContext.request.contextPath }/lib/common-scripts.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/lib/gritter/js/jquery.gritter.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/lib/gritter-conf.js"></script>
  <!--script for this page-->
  <script src="${pageContext.request.contextPath }/lib/sparkline-chart.js"></script>
  <script src="${pageContext.request.contextPath }/lib/zabuto_calendar.js"></script>

</body>
	<script type="text/javascript">
		//声明一个全局变量key
		 var key="";
		$(function(){
			//赋值动作,各种监听事件
			//界面一进来就需要发送ajax请求文章列表
			$.get("${pageContext.request.contextPath }/MomentsController",{op:"momentsByPage_ajax"},function(result){
				//显示数据写成一个方法,以后就不用在做拼接
				showData(result);
			},"json")
			
			
			//首页
			$(document).on("click",".first",function(){
				//发送ajax请求
				$.get("${pageContext.request.contextPath }/MomentsController",{op:"momentsByPage_ajax",pageNo:1,pageSize:4,titleKey:key},function(result){
					//显示数据写成一个方法,以后就不用在做拼接
					showData(result);
				},"json")
			});
		
			//末页
			$(document).on("click",".last",function(){
				//获取末页值
				var totalPage=$("#totalPage").text();
				//发送ajax请求
				$.get("${pageContext.request.contextPath }/MomentsController",{op:"momentsByPage_ajax",pageNo:totalPage,pageSize:4,titleKey:key},function(result){
					//显示数据写成一个方法,以后就不用在做拼接
					showData(result);
				},"json")
			});
			
			//下一页
			$(document).on("click",".next",function(){
				//获取末页值
				var pageNo=$("#pageNo").text();
				//发送ajax请求
				$.get("${pageContext.request.contextPath}/MomentsController",{op:"momentsByPage_ajax",pageNo:(parseInt(pageNo)+1),pageSize:4,titleKey:key},function(result){
					//显示数据就写成一个方法，以后就不用了再做拼接
					showData(result);
				},"json")
			});
			//每一页
			$(document).on("click",".currentPage",function(){
				//获取当前选中的页码
				var pageNo=$(this).text();
				//发送ajax请求
				$.get("${pageContext.request.contextPath}/MomentsController",{op:"momentsByPage_ajax",pageNo:pageNo,pageSize:4,titleKey:key},function(result){
					//显示数据就写成一个方法，以后就不用了再做拼接
					showData(result);
				},"json")
			});
			
			//跳转
			$(document).on("click",".turnto",function(){
				//获取当前number中的值
				var pageNo=$("#turntoId").val();
				//获取末页的值
				var totalPage=$("#totalPage").text();
				if(pageNo<1){
					pageNo=1;
					$("#turntoId").val(pageNo);
				}else if(pageNo > totalPage*1){ //若语言类型，字符串*1直接转换数字
					pageNo=totalPage;
					$("#turntoId").val(pageNo);
				}
				//发送ajax请求
				$.get("${pageContext.request.contextPath}/MomentsController",{op:"momentsByPage_ajax",pageNo:pageNo,pageSize:4,titleKey:key},function(result){
					//显示数据就写成一个方法，以后就不用了再做拼接
					showData(result);
				},"json")
			});
			
			
			//修改监听事件
			$("#updateBtn").click(function(){
				//创建一个js对象存储文章修改之后信息发送服务器
				var moments={
						//属性要和实体类一致
						m_id: $("#m_id").val(),
						m_begin: $("#m_begin").val(),
						m_end: $("#m_end").val(),
						m_interval: $("#m_interval").val()
				};
				
				$.get("${pageContext.request.contextPath}/MomentsController",{op:"update_ajax",moments:JSON.stringify(moments)},function(flag){
					if(flag){
						//关闭模态框后刷新数据
						$("#myModal").modal('hide');
						//刷新数据  发送ajax请求，显示当前该的第一页
						$.get("${pageContext.request.contextPath}/MomentsController",
								{
									op:"momentsByPage_ajax",
									pageNo:$("#pageNo").text(), //当前页
									pageSize:4,
									titleKey:key
							},function(result){
						//显示数据就写成一个方法，以后就不用了再做拼接
						showData(result);
						},"json")
					}else{
						alert("修改失败！");
					}
				},"json")
			})
						
		})
		function showData(result){
			//1.每一次遍历之前都要清空
			$("#momentsListBody").empty();
			$("#showPageInfo").empty();
			$("#pageItem").empty();
			//2.显示文章列表数据
			$.each(result.data,function(index,moments){
				//先把tr标签复制到后端的字符集中，自动转义，复制到txt文本中替换其中的${  与    }
				$("#momentsListBody").append("<tr>\r\n" + 
			    		"	                    <td>"+moments.m_id +"</td>\r\n" + 
			    		"	                    <td>"+moments.m_begin +"</td>\r\n" + 
			    		"	                    <td>"+moments.m_end +"</td>\r\n" + 
			    		"	                    <td>"+moments.m_interval +"</td>\r\n" + 
			    		"	                    <td>\r\n" + 
			    		"							<a href=\"\" data-toggle=\"modal\" data-target=\"#myModal\"\r\n" + 
			    		"								data-mid=\""+moments.m_id+"\"\r\n" + 
			    		"								data-mbegin=\""+moments.m_begin+"\"\r\n" + 
			    		"								data-mend=\""+moments.m_end+"\"\r\n" + 
			    		"								data-minterval=\""+moments.m_interval+"\"\r\n" + 
			    		"								onclick=\"showUpdateDate(this)\">\r\n" + 
			    		"		                      	<button class=\"btn btn-primary btn-xs\"><i class=\"fa fa-pencil\"></i></button>\r\n" + 
			    		"	                      </a>	                      	\r\n" + 
			    		"	                      <a href=\"javascript:delFun("+moments.m_id+")\">\r\n" + 
			    		"	                      	<button class=\"btn btn-danger btn-xs\"><i class=\"fa fa-trash-o \"></i></button>\r\n" + 
			    		"	                      </a>\r\n" + 
			    		"	                    </td>\r\n" + 
			    		"	                  </tr>")
			});
			//显示分页信息
			$("#showPageInfo").append("当前第<span id='pageNo'>"+result.pageNo+"</span>页/共<span id='totalPage'>"+result.totalPage+
					                  "</span>页/每页显示<span id='pageSize'>"+result.pageSize+"</span>条/共<span id='totalCount'>"+result.totalCount+"</span>条数据");
					//首页
					   if(1==result.pageNo){
						   $("#pageItem").append('<li class="disabled"><a href="#">首页</a></li>');
					   }else{
						   $("#pageItem").append('<li><a href="#" class="first">首页</a></li>');
					   }
					   //显示分页栏目
					   for(var i=1;i<=result.totalPage;i++){
						   if(i==result.pageNo){
							   $("#pageItem").append('<li class="active"><a href="#">'+i+'</a></li>');
						   }else{
							   $("#pageItem").append('<li><a href="#" class="currentPage">'+i+'</a></li>');
						   } 
					   }
					   //下一页
					   if(result.pageNo==result.totalPage){
						   $("#pageItem").append('<li class="disabled"><a href="#">下一页</a></li>');
					   }else{
						   $("#pageItem").append('<li><a href="#" class="next">下一页</a></li>');
					   }
					   //末页
					   if(result.pageNo==result.totalPage){
						   $("#pageItem").append('<li class="disabled"><a href="#">末页</a></li>');
					   }else{
						   $("#pageItem").append('<li><a href="#" class="last">末页</a></li>');
					   }
					   //跳转页
					    $("#pageItem").append('<li><a href="#"><input type="number" id="turntoId" value="'+result.pageNo+'" min="1" max="'+result.totalPage+
					    		'" style="width:40px;height:20px"/></a></li>');
					    $("#pageItem").append('<li><a href="#" class="turnto">跳转</a></li>');
		}
		
		/* 删除指定编号的记录 */
		function delFun(m_id) {
			var flag = confirm("是否确定删除文章编号为:" + m_id);
			if (flag) {
				//发起ajax请求
				$.get("${pageContext.request.contextPath }/MomentsController",{op:"dele_ajax",m_id:m_id},function(data){
					if(data){
						//刷新数据 发送ajax请求  显示当前改的那一页
						$.get("${pageContext.request.contextPath }/MomentsController",
								{
									op:"momentsByPage_ajax",
									pageNo:$("#pageNo").text(),//当前页
									pageSize:3,
									titleKey:key
								},function(result){
							//显示数据写成一个方法,以后就不用在做拼接
							showData(result);
						},"json")
					}else{
						alert("删除失败!")
					}
				},"json")
			}
		}
		
		/*修改时获取原来的数据在模态框中显示*/
		function showUpdateDate(obj){
			//获取原来的数据
			var m_id=$(obj).data("mid");
			var m_begin=$(obj).data("mbegin");
			var m_end=$(obj).data("mend");
			var m_interval=$(obj).data("minterval");
			//显示在模态框中指定的位置
			$("#myModal #m_id").val(m_id);
			$("#myModal #m_begin").val(m_begin);
			$("#myModal #m_end").val(m_end);
			$("#myModal #m_interval").val(m_interval);
		}

	</script>
</html>